<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <body>

        <ui:composition template="./index.xhtml">
            <ui:define name="title">
                Tạo câu hỏi
            </ui:define>
            <ui:define name="content">
                <div class="container-fluid">
                    <h:form>
                        <div class="row">
                            <div class="col-md-12">
                                <p:outputLabel for="title" value="#{msg['questionName']}: " /><p:spacer/>
                                <p:inputText id="title" styleClass="width-100" value="#{questionManagement.question.questionName}" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <p:outputLabel for="detail" value="#{msg['questionDetail']}: " />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p:editor id="detail" value="#{questionManagement.question.questionDetail}" styleClass="width-100" height="400" />
                            </div>
                        </div>
                        <div class="row margin-top5">
                            <div class="col-md-12">
                                <p:outputLabel for="tags" value="#{msg['tags']}: " />
                                <p:autoComplete multiple="true" id="tags"
                                                value="#{questionManagement.selectedTags}"
                                                completeMethod="#{questionManagement.completeTag}" var="tag"
                                                itemLabel="#{tag.tagName}" itemValue="#{tag}" forceSelection="true"
                                                converter="tagConverter">
                                    <p:ajax event="itemSelect" />
                                    <p:ajax event="itemUnselect" />
                                    <p:column>
                                        <h:outputText value="#{tag.tagName}" />
                                    </p:column>
                                </p:autoComplete>
                            </div>
                        </div>
                        <div class="row margin-top5">
                            <div class="col-md-12">
                                <h:commandButton styleClass="btn btn-primary float-right" value="#{msg['postQuestion']}" 
                                                 action="#{questionManagement.createQuestion(evt)}" />
                            </div>
                        </div>
                    </h:form>
                </div>
            </ui:define>
        </ui:composition>

    </body>
</html>
